﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>精美的css3左侧竖直分类导航菜单ui特效</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!--图标库-->
	<link rel='stylesheet' href='./static/css/all.min.css'>
	<!--核心样式-->
	<link rel='stylesheet' href='./static/css/aqua.min.css'>
	<link rel="stylesheet" href="./static/css/font_img_style.css">
	<!-- <link rel="stylesheet" href="./static/css/style.css"> -->
	<style>
		._btn {
			width: 15rem;
			height: 35px;
			color: #fff;
			border: none;
			border-radius: 10px;
			outline: none;
			background-color: rgb(64, 139, 224);
			cursor: pointer;
		}
	</style>
</head>

<body>
	<div class="container flex flex-wrap justify-between" style="margin-right: auto;">



		<div class="dark-mode mx-8 my-4 bg-primary flex flex-col justify-between px-5 py-12 rounded overflow-hidden">
			<div>
				<i class="fab fa-codepen mb-8 ml-3 text-secondary-darkest text-2xl cursor-pointer"></i>
				<div class="input-group">
					<div class="btn">
						<i class="icon fas fa-search"></i>
					</div>
					<input type="text" class="form-control" placeholder="Search">
				</div>
				<ul class="menu mt-6">
					<li class="menu-item active"><i class="icon fas fa-compass mr-5"></i>Index</li>
					<li class="menu-item"><i class="icon fas fa-laptop mr-5"></i>Oline</li>
					<li class="menu-item"><i class="icon fas fa-user mr-5"></i>User</li>
					<li class="divider"></li>
					<!-- <li class="menu-item"><i class="icon fas fa-image mr-5"></i>Images</li> -->
					<li class="menu-item"><i class="icon fas fa-bell mr-5"></i>Message</li>
				</ul>
			</div>
			<div class="flex justify-between items-center">
				<div class="flex items-center cursor-pointer">
					<img src="https://cos.yungao-tech.com/Web/image/test/202109/27/a454ee0bbfe3fbf1f621e24a17176701f1f788eaimage/png"
						alt="" class="w-9 rounded-full">
					<div class="ml-3 text-info-lighter" style="max-width: 200px;">糕点</div>
				</div>
				<!-- <i class=""></i> -->
				<i class="fas fa-solid fa-right-from-bracket text-secondary text-lg cursor-pointer"></i>
			</div>
		</div>

		<div class="dark-mode flex flex-wrap justify-between">
			<!-- 主体内容 -->
			<img src="./static/svg/logo.svg" id="avatar" height="128px" width="128px">
			<div class="">
				<button id="loginApp" class="_btn">连接网络</button>
				<br>
				<button id="logout" class="_btn">退出登录</button>
			</div>
		</div>

	</div>

	<script src="./static/js/script.js"></script>

</body>

</html>